<template>
  <div class="content">
    <dc-header :title="'营业分析'" :icon="'icon-header-back'"></dc-header>
    <div class="head-top">
      <dc-date @getTabBarDatep="getDate"></dc-date>
    </div>
    <div class="common-card mt20 bg-white">
      <dc-row class="pt40 pb40 mt20" type="flex" justify="space-around">
        <dc-col class="card-data" span="8">
          <span class="num">{{money.busiTotal}}</span>
          <span class="label">营业额</span>
        </dc-col>
        <dc-col class="card-data" span="8">
          <span class="num">{{money.discTotal }}</span>
          <span class="label">优惠金额</span>
        </dc-col>
        <dc-col class="card-data" span="8">
          <span class="num">{{money.incomeTotal}}</span>
          <span class="label">实际收入</span>
        </dc-col>
      </dc-row>
      <dc-row class="pt40 pb40" type="flex" justify="space-around">
        <dc-col class="card-data" span="8">
          <span class="num">{{money.bsCount}}</span>
          <span class="label">客单数(TC)</span>
        </dc-col>
        <dc-col class="card-data" span="8">
          <span class="num">{{money.avgBsPrice}}</span>
          <span class="label">平均客单价(AC)</span>
        </dc-col>
      </dc-row>
    </div>
    <div class="common-card bg-white mt20">
      <dc-cell class="main-title" title="营业额趋势" :valStyle="{color:'#7b78f2'}" sVal="true"></dc-cell>
      <mt-navbar class="nav-block bs-nab" v-model="selected">
        <mt-tab-item @click.native="changeType(1)" id="1">营业额</mt-tab-item>
        <mt-tab-item @click.native="changeType(2)" id="2">实际收入</mt-tab-item>
      </mt-navbar>
      <div class="common-chart" id="Trendcolumn"></div>
    </div>
    <component :is="charts" :timeFlag="currentDate.type" :beginTime="currentDate.startTime" :endTime="currentDate.endTime"></component>
  </div>
</template>

<script>
  import header from '@/components/header';
  import {col, row} from '@/components/Flex';
  import cell from '@/components/cell';
  import {initColumn} from '@/common/echarts/column';
  import date from '@/components/datetabbar/all';
  import api from '@/common/api/bsAnalysis';
  import day from './dayType';
  import other from './weekType';

  export default {
    components: {
      'dc-header': header,
      'dc-col': col,
      'dc-row': row,
      'dc-date': date,
      'dc-cell': cell,
      day: day,
      other: other
    },
    data () {
      return {
        money: {},
        trendLeg: [],
        trendData: {},
        charts: '',
        Trendcolumn: null,
        selected: '1',
        currentDate: {}
      };
    },
    methods: {
      getDate (date) {
        if (date) {
          this.selected = '1';
          this.currentDate = date;
          this.dataInit();
          this.charts = parseInt(date.type) === 1 ? 'day' : 'other';
          this.buildChart();
        }
      },
      //数据初始化-切换后初始化
      dataInit () {
        this.money = {busiTotal: 0, discTotal: 0, incomeTotal: 0, bsCount: 0, avgBsPrice: 0};
        this.trendLeg = ['营业额', '营业目标'];
        this.trendData = {x: ['0'], data1: ['0'], data2: ['0']};
      },
      changeType (type) {
        this.trendLeg = (type === 1 ? ['营业额', '营业目标'] : ['实际收入', '保本线']);
        let data = {
          trendType: type,
          timeFlag: this.currentDate.type,
          beginTime: this.currentDate.startTime,
          endTime: this.currentDate.endTime
        };
        this._getBsAnalysisTrend(data);
      },
      //重新生成所有图表
      buildChart () {
        let data = {
          trendType: 1,
          timeFlag: this.currentDate.type,
          beginTime: this.currentDate.startTime,
          endTime: this.currentDate.endTime
        };
        this._getBsAnalysis(data);
        this._getBsAnalysisTrend(data);
      },
      _getBsAnalysis (data) {        //获取营业分析数据
        api.getBsAnalysis(data)
          .then(res => {
            if (res) {
              this.money = res;
            }
          });
      },
      _getBsAnalysisTrend (data) {   //获取营业额趋势
        api.getBsAnalysisTrend(data)
          .then(res => {
            if (res && res.businessDetail) {
              this.trendData.x = [];
              this.trendData.data1 = [];
              this.trendData.data2 = [];
              let self = this;
              let temp = null;
              if (res.breakEvenLine && res.breakEvenLine.length === 1) {
                temp = res.breakEvenLine[0].totalMoney;
              }
              if (res.businessGoal && res.businessGoal.length === 1) {
                temp = res.businessGoal[0].totalMoney;
              }
              if (res.businessDetail && res.businessDetail.length > 0) {
                res.businessDetail.forEach((item) => {
                  item.totalMoney = item.totalMoney.replace(',', '');
                  self.trendData.data1.push(item.totalMoney);
                  self.trendData.data2.push(temp);
                  self.trendData.x.push(item.timeName);
                });
              }
              if (res.breakEvenLine && res.breakEvenLine.length > 1) {
                this.trendData.data2 = [];
                res.breakEvenLine.forEach((item) => {
                  item.totalMoney = item.totalMoney.replace(',', '');
                  self.trendData.data2.push(item.totalMoney);
                });
              }
              if (res.businessGoal && res.businessGoal.length > 1) {
                this.trendData.data2 = [];
                res.businessGoal.forEach((item) => {
                  item.totalMoney = item.totalMoney.replace(',', '');
                  self.trendData.data2.push(item.totalMoney);
                });
              }
            }
            this.initSalesColumn();
          });
      },
      //营业额趋势
      initSalesColumn () {
        this.Trendcolumn.hideLoading();
        this.Trendcolumn.setOption({
          legend: {
            data: this.trendLeg
          },
          xAxis: [
            {
              type: 'category',
              data: this.trendData.x
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '营业额'
            }
          ],
          series: [
            {
              name: this.trendLeg[0],
              type: 'bar',
              data: this.trendData.data1
            },
            {
              name: this.trendLeg[1],
              type: 'line',
              data: this.trendData.data2
            }
          ]
        });
      }
    },
    mounted () {
      this.Trendcolumn = initColumn('#Trendcolumn');
      this.initSalesColumn();
    }
  };
</script>

<style lang="scss">
  @import "../../../assets/css/variable";

  .bs-nab {
    width: px2rem(360px);
    margin: 0 auto;
  }
</style>
